import React, { Component } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';

import {
  Card,
  Col,
  Input,
  Select,
  Row,
  Radio,
  Tooltip,
} from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';

const { Option } = Select;

interface SettlementProps {
  detail?: any;
  forms: any;
  mergeFun: any;
}

interface SettlementState {
  modelType: number;
  prev_modelType: number;
}

function mapStateToProps(state: any) {
  const {
    franchiseeContractEditor: { detail },
  } = state;

  return {
    detail,
  };
}

@connect(mapStateToProps)

class SettlementElem extends Component<SettlementProps, SettlementState> {
  state = {
    modelType: 1, // 服务费抽成模式
    prev_modelType: 0,
  };

  static getDerivedStateFromProps(nextProps: SettlementProps, preState: SettlementState) {
    const { prev_modelType } = preState;
    const {
      detail: { service_fee_type, settle_type },
      mergeFun,
    } = nextProps;

    if (service_fee_type && prev_modelType !== service_fee_type) {
      mergeFun('service_fee_type', service_fee_type);
      mergeFun('settle_type', settle_type);

      const modelFun = () => {
        // service_fee_type 2充值类型 1非充值类型
        if (service_fee_type === 2) return 1;

        // settle_type 1固定费用 2总收入百分比 3按件收费
        switch (settle_type) {
          case settle_type:
            return settle_type + 1;
          default:
            return null;
        }
      };
      return ({
        modelType: modelFun(),
        prev_modelType: service_fee_type,
      });
    }
    return null;
  }

  handleChangeType = ({ target: { value } }: any) => {
    const { mergeFun } = this.props;
    this.setState({ modelType: value }, () => {
      if (value === 1) {
        mergeFun('service_fee_type', 2);
      } else {
        mergeFun('service_fee_type', 1);
        mergeFun('settle_type', value - 1);
      }
    });
  }

  renderModelOneElem = (getFieldDecorator: any, detail: any) => (
    <div>
      <Row>
        <Col md={20} sm={24}>
          <Form.Item label="派件平台服务费/件">
            {getFieldDecorator('delivery_service_fee', {
              initialValue: detail.delivery_service_fee
              && (detail.delivery_service_fee / 100).toFixed(2),
              rules: [{ required: true, message: '请输入派件服务费' }],
            })(
              <Input allowClear type="number" addonAfter="元" />,
            )}
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col md={20} sm={24}>
          <Form.Item label="揽件平台服务费/件">
            {getFieldDecorator('sending_service_fee', {
              initialValue: detail.sending_service_fee
              && (detail.sending_service_fee / 100).toFixed(2),
              rules: [{ required: true, message: '请输入揽件服务费' }],
            })(
              <Input allowClear type="number" addonAfter="元" />,
            )}
            <span style={{ color: 'red' }}>
              扣费节点为用户支付完成，订单状态为：已支付
            </span>
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col md={20} sm={24}>
          <Form.Item label="寄存平台服务费/件">
            {getFieldDecorator('deposit_service_fee', {
              initialValue: detail.deposit_service_fee
                && (detail.deposit_service_fee / 100).toFixed(2),
              rules: [{ required: true, message: '请输入寄存服务费' }],
            })(
              <Input allowClear type="number" addonAfter="元" />,
            )}
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col md={20} sm={24}>
          <div className="subtitle marginB16 marginT16">增值服务费</div>
          <Form.Item label="短信服务费/条" style={{ margin: 0 }}>
            {getFieldDecorator('sms_service_fee', {
              initialValue: detail.sms_service_fee && (detail.sms_service_fee / 100).toFixed(2),
              rules: [{ required: true, message: '请输入短信服务费' }],
            })(<Input allowClear type="number" addonAfter="元" />)}
          </Form.Item>
          <div className="subtitle marginB16 marginT16">提现手续费</div>
          <Form.Item label="提现手续费/笔" className="marginB0Import">
            {getFieldDecorator('withdraw_charge_ratio', {
              initialValue: detail.withdraw_charge_ratio,
              rules: [{ required: true, message: '请选择账户类型' }],
            })(<Input allowClear type="number" addonAfter="‰" />)}
          </Form.Item>
        </Col>
      </Row>
    </div>
  )

  renderModelTwoElem = (getFieldDecorator: any, detail: any) => (
    <Row>
      <Col md={20} sm={24}>
        <Form.Item label="固定费用">
          {getFieldDecorator('settle_amount', {
            initialValue: detail.settle_amount
              && (detail.settle_amount / 100).toFixed(2),
            rules: [{ required: true, message: '请输入固定费用' }],
          })(
            <Input allowClear type="number" addonAfter="元" />,
          )}
        </Form.Item>
      </Col>
    </Row>
  )

  renderModelTheerElem = (getFieldDecorator: any, detail: any) => (
    <Row>
      <Col md={20} sm={24}>
        <Form.Item label="总收入百分比">
          {getFieldDecorator('settle_amount', {
            initialValue: detail.settle_amount,
            rules: [{ required: true, message: '请输入总收入百分比' }],
          })(
            <Input allowClear type="number" addonAfter="%" />,
          )}
        </Form.Item>
      </Col>
    </Row>
  )

  renderModelFourElem = (getFieldDecorator: any, detail: any) => (
    <Row>
      <Col md={20} sm={24}>
        <Form.Item label="按件收费">
          {getFieldDecorator('settle_amount', {
            initialValue: detail.settle_amount
              && (detail.settle_amount / 100).toFixed(2),
            rules: [{ required: true, message: '请输入按件收费' }],
          })(
            <Input allowClear type="number" addonAfter="元" />,
          )}
        </Form.Item>
      </Col>
    </Row>
  )

  render() {
    const { modelType } = this.state;
    const {
      detail,
      forms: { getFieldDecorator },
    } = this.props;
    const arr = [...new Array(28)].map((item, index) => index + 1);

    return (
      <Card title="结算信息" bordered={false}>
        <Row>
          <Col md={8} sm={24}>
            <Form.Item label="结算日期" className="marginB16">
              {getFieldDecorator('settle_date', {
                initialValue: detail.settle_date,
                rules: [{ required: true, message: '请选择结算日期' }],
              })(
                <Select placeholder="请选择">
                  {
                    arr.map((item) => {
                      const returnValue = <Option key={item} value={item}>每月{item}日</Option>;
                      return returnValue;
                    })
                  }
                </Select>,
              )}
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={{ md: 8, xl: 48, lg: 48 }}>
          <Col md={14} sm={24}>
            <div className="dottedBox">
              <Form.Item label="服务费抽成" className="marginB8">
                {getFieldDecorator('modelType', {
                  initialValue: modelType,
                })(
                  <Radio.Group
                    onChange={this.handleChangeType}
                  >
                    <Radio value={1} style={{ display: 'block', marginTop: 5 }}>充值类型</Radio>
                    <Radio value={2}>非充值类型 1</Radio>
                    <Radio value={3}>非充值类型 2</Radio>
                    <Radio value={4}>非充值类型 3</Radio>
                  </Radio.Group>,
                )}
              </Form.Item>
              {modelType === 1 && (
                this.renderModelOneElem(getFieldDecorator, detail)
              )}
              {modelType === 2 && (
                this.renderModelTwoElem(getFieldDecorator, detail)
              )}
              {modelType === 3 && (
                this.renderModelTheerElem(getFieldDecorator, detail)
              )}
              {modelType === 4 && (
                this.renderModelFourElem(getFieldDecorator, detail)
              )}
            </div>
          </Col>

          <Col md={10} sm={24}>
            <div className="dottedBox">
              <div className="subtitle marginB16">业务项目营收</div>
              <Row>
                <Col md={22} sm={24} style={{ display: 'flex' }}>
                  <Form.Item label="揽件分润比例" className="marginB0Import" style={{ flex: 1 }}>
                    {getFieldDecorator('send_income_ratio', {
                      initialValue: detail.send_income_ratio,
                      rules: [{ required: true, message: '请输入揽件分润比例' }],
                    })(<Input allowClear type="number" addonAfter="%" />)}
                  </Form.Item>
                  <Tooltip
                    title="加盟商应得费用为：用户实付金额 * 配置百分比; 如配置80%，该订单用户支付10元，加盟商将获得8元"
                  >
                    <QuestionCircleOutlined
                      style={{
                        marginLeft: 8,
                        lineHeight: '32px',
                      }}
                    />
                  </Tooltip>
                </Col>
              </Row>

            </div>
            <div className="dottedBox" style={{ marginTop: '40px' }}>
              <div className="subtitle marginB16">取件订单延期收费抽成</div>
              <Row>
                <Col md={22} sm={24} style={{ display: 'flex' }}>
                  <Form.Item label="延期费抽成比例" className="marginB0Import" style={{ flex: 1 }}>
                    {getFieldDecorator('delivery_delay_fee_ratio', {
                      initialValue: (detail.delivery_delay_fee_ratio / 100).toFixed(2),
                      rules: [{ required: true, message: '请输入延期费抽成比例' }],
                    })(<Input allowClear type="number" addonAfter="%" />)}
                  </Form.Item>
                  <Tooltip
                    title="加盟商应得费用为：延期费 * 配置百分比; 如配置80%，该订单用户支付延期费用10元，加盟商将获得8元"
                  >
                    <QuestionCircleOutlined
                      style={{
                        marginLeft: 8,
                        lineHeight: '32px',
                      }}
                    />
                  </Tooltip>
                </Col>
              </Row>

            </div>
          </Col>
        </Row>
      </Card>
    );
  }
}

export default SettlementElem;
